<template>
  <div>
    <div style="padding:10px;">
      <el-alert :closable="false" title="用户管理" />
    </div>
    <div style="padding:10px;">
      <el-alert :closable="false" title="用户权限：1:普通用户 2：管理员 3：超级管理员" />
    </div>

    <template>
      <el-table
        :data="userData"
        style="width: 100%">
        <el-table-column
          prop="id"
          label="用户id"
          width="250">
        </el-table-column>
        <el-table-column
          prop="name"
          label="用户昵称"
          width="250">
        </el-table-column>

        <el-table-column
          prop="userPower"
          label="用户权限"
          width="420">
          <template slot-scope="scope">
            <el-input-number

              v-model="scope.row.userPower"
              @change="handleChange(scope.row)"
              :min="1"
              :max="3"
              label="权重">

            </el-input-number>
          </template>
        </el-table-column>
<!--        <el-table-column
          prop="headerUrl"
          label="用户头像"
          width="100">
        </el-table-column>-->

        <el-table-column
          fixed="right"
          label="操作"
          width="100">
          <template slot-scope="scope">
            <el-button
              v-on:click="open(scope.row)"
              type="text"
              size="small"
            >删除用户</el-button>
            <!-- <el-button type="text" size="small">编辑</el-button>-->
          </template>
        </el-table-column>
      </el-table>
    </template>

  </div>

</template>

<script>
  import {ApiService} from "@/api/apiService";

  export default {
    data() {
      return {
        userData: []
      }
    },
    mounted() {
      this.getUserMessage()
    },
    methods:{
      handleChange(row) {
        console.log(row);
        const updateGoodsWeight = new ApiService("/updateUserPower")
        updateGoodsWeight.getParams({
          userId:row.id,
          userPower:row.userPower
        })

      },
      open(row) {
        this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
          this.deleteUsers(row)
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
      deleteUsers(row){
        console.log("row"+row.id)//获取到用户id
        const deleteUsers = new ApiService("/admin/deleteUser")
        deleteUsers.getParams({
            userId:row.id
          }
        )
        location.reload();
      },
      getUserMessage(){

        const getUserMessage = new ApiService("/pethome/users")
        getUserMessage.getViewList().then(
          res=>{
            console.log("getUserMessage"+res.data)
            this.userData = res.data
          }
        )
      }
    }
  }



</script>

<style scoped>

</style>

